<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>To-Do List 任务列表</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
          rel="stylesheet"
          integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
          crossorigin="anonymous">
    <style>
        .completed {
            text-decoration: line-through;
            color: #6c757d; /* 灰色 */
        }
    </style>
</head>
<body>

<div class="container mt-5">
    <h1 class="mb-4">任务列表 (Spring Boot + Thymeleaf)</h1>

    <a th:href="@{/todos/new}" class="btn btn-primary mb-3">
        <i class="fas fa-plus"></i> 添加新任务
    </a>

    <table class="table table-hover">
        <thead class="table-dark">
        <tr>
            <th>ID</th>
            <th>任务描述</th>
            <th>状态</th>
            <th>创建时间</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="todo : ${todos}">
            <td th:text="${todo.id}">1</td>
            <td th:classappend="${todo.completed} ? 'completed'">
                <span th:text="${todo.description}">示例任务内容</span>
            </td>
            <td>
                <span th:if="${todo.completed}" class="badge bg-success">已完成</span>
                <span th:unless="${todo.completed}" class="badge bg-warning text-dark">待办</span>
            </td>
            <td th:text="${#temporals.format(todo.createdAt, 'yyyy-MM-dd HH:mm')}">2024-01-01 10:00</td>
            <td>
                <a th:href="@{/todos/toggle/{id}(id=${todo.id})}"
                   th:classappend="${todo.completed} ? 'btn-secondary' : 'btn-success'"
                   class="btn btn-sm">
                    <span th:text="${todo.completed} ? '取消完成' : '标记完成'">标记完成</span>
                </a>

                <a th:href="@{/todos/edit/{id}(id=${todo.id})}" class="btn btn-sm btn-info text-white">
                    编辑
                </a>

                <a th:href="@{/todos/delete/{id}(id=${todo.id})}"
                   onclick="return confirm('确定删除该任务吗？');"
                   class="btn btn-sm btn-danger">
                    删除
                </a>
            </td>
        </tr>
        <tr th:if="${todos.isEmpty()}">
            <td colspan="5" class="text-center text-muted">目前没有任务，请添加一个。</td>
        </tr>
        </tbody>
    </table>
</div>
</body>
</html>